<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{path:'/'}">系统首页</el-breadcrumb-item>
        <el-breadcrumb-item>富文本编辑器</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-tabs v-model="selected">
        <el-tab-pane label="未读消息" name="unread">
          <el-table :data="unread">
            <el-table-column label="日期" prop="date"></el-table-column>
            <el-table-column label="内容" prop="content"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button type="success" @click="makeRead(scope.$index,scope.row)">标记已读</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="success" style="margin-top: 10px">全部标记已读</el-button>
        </el-tab-pane>

        <el-tab-pane label="已读消息" name="already">
          <el-table :data="already">
            <el-table-column label="日期" prop="date"></el-table-column>
            <el-table-column label="内容" prop="content"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button type="danger" @click="makeRemove(scope.$index,scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="danger" style="margin-top: 10px">全部删除</el-button>
        </el-tab-pane>

        <el-tab-pane label="回收站" name="removed">
          <el-table :data="removed">
            <el-table-column label="日期" prop="date"></el-table-column>
            <el-table-column label="内容" prop="content"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button @click="makeReturn(scope.$index,scope.row)">还原</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button style="margin-top: 10px">全部还原</el-button>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Notice",
    data() {
      return {
        selected: 'unread',
        unread: [
          {'date': '2018-10-10', 'content': '【bug fix】用户添加失败！'},
          {'date': '2018-10-10', 'content': '【系统消息】任务A已开始执行！'}
        ],
        already: [],
        removed: [],
      }
    },
    methods: {
      makeRead(index, row) {
        this.$confirm('确定将（' + row.content + '）标记为已读？', '提示').then(() => {
          this.unread.splice(index, 1);
          this.already.splice(0, 0, Object.assign({}, row));
          this.$message.success('操作成功！');
        });

      },
      makeRemove(index, row) {
        this.$confirm('确定删除（' + row.content + '）？', '提示').then(() => {
          this.already.splice(index, 1);
          this.removed.splice(0, 0, Object.assign({}, row));
          this.$message.success('操作成功！');
        });
      },
      makeReturn(index, row) {
        this.$confirm('确定还原（' + row.content + '）？', '提示').then(() => {
          this.removed.splice(index, 1);
          this.already.splice(0, 0, Object.assign({}, row));
          this.$message.success('操作成功！');
        });
      }
    }
  }
</script>

<style scoped>

</style>
